<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link rel="stylesheet" th:href="@{https://unpkg.com/element-ui/lib/theme-chalk/index.css}">
    <link rel="stylesheet" th:href="@{static/css/gy.css}">
<!--    <script th:src="@{https://unpkg.com/vue/dist/vue.js}"></script>-->
<!--    <script th:src="@{https://unpkg.com/vue-router/dist/vue-router.js}"></script>-->
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">逾期催收列表</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main">
    <div class="head">
        <div class="head1">
            <div class="head11">
                <i class="el-icon-user-solid"></i>
            </div>
            <div class="head12">
                逾期用户数量
            </div>
            <div class="head13">
                本月/今年
            </div>
            <div class="head14">
                <font size="20px">{{countMonth}}/</font>{{countYear}}
            </div>
        </div>
        <div class="head2">
            <div class="head11">
                <i class="el-icon-coin"></i>
            </div>
            <div class="head12">
                逾期金额（本金+利息）
            </div>
            <div class="head13">
                本月/今年
            </div>
            <div class="head14">
                <font size="23px">{{countMonthCount}}/</font>{{countYearCount}}
            </div>
        </div>
    </div>
    <div id="form">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px">筛选查询</span>
            </div>

            <!--分页查询-->
            <div align="left">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="姓名" style="margin-left: 20px">
                        <el-input v-model="formInline.name" placeholder="姓名" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" style="margin-left: 20px">
                        <el-input v-model="formInline.userName" placeholder="账号" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>
    </div>
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">数据列表</span>
                <el-button type="text" @click="dialogFormVisible = true">
                        <el-row>
                            <el-button size="small" style="float: left; margin-left: 300px">群发邮件</el-button>
                        </el-row>
                </el-button>

                <el-button type="text" @click="showDialog = true">
                    <el-row>
                        <el-button size="small" style="float: left; margin-left: 50px">电话提醒</el-button>
                    </el-row>
                </el-button>

            </div>

            <template>
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        @selection-change="handleGoodsChange"
                        ref = "multipleTable">
                    <!--  用porp给这一列绑定 tableData中对应的属性 ，type=selection表示这一列是复选框 -->
                    <!--用户ID-->
                    <el-table-column
                        prop="id"
                        type="selection"
                        width="100"
                        align="center">
                    </el-table-column>
                    <!--订单ID-->

                    <!--  label="编号"表示这一列的表头是“编号”,width代表这一列宽度 -->
                    <el-table-column
                            label="操作"
                            width="100"
                            align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click=jump(scope.row)>
                                <el-button type="text" @click="dialogTableVisible = true">查看详情</el-button>
                            </el-button>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="collectionStatus"
                            label="催收状态"
                            width="150"
                            align="center"
                            :formatter="gy1">
                    </el-table-column>

                    <el-table-column
                            prop="repaymentWishes"
                            label="还款意愿"
                            width="100"
                            align="center"
                            :formatter="gy2">
                    </el-table-column>

                    <el-table-column
                            prop="collectionType"
                            label="催收类型"
                            width="100"
                            align="center"
                            :formatter="gy3">
                    </el-table-column>

                    <el-table-column
                            prop="contractBean.contractNo"
                            label="合同编号"
                            width="150"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="contractBean.orderBean.userBean.userName"
                            label="用户账号"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="contractBean.orderBean.userBean.userInforBean1.name"
                            label="用户姓名"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="contractBean.orderBean.productBean.channelBean.companyName"
                            label="资金方"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="contractBean.orderBean.money"
                            label="贷款总额"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="shouldRepayPrincipal"
                            label="应还本金"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="shouldRepayInterest"
                            label="应还利息"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="overdue"
                            label="逾期天数"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="lateCharge"
                            label="罚息"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="shouldRepaySum"
                            label="应还总额"
                            width="100"
                            align="center"
                            :formatter="repaySumFormat">
                    </el-table-column>

                    <el-table-column
                            prop="realPrincipal"
                            label="实还本金"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="realInterest"
                            label="实还利息"
                            width="100"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="realSum"
                            label="实还总额"
                            width="100"
                            align="center"
                            :formatter="realSumFormat">
                    </el-table-column>

                    <el-table-column
                            prop="realRepaymentTime"
                            label="实还日期"
                            width="150"
                            align="center"
                            :formatter="formatDate">
                    </el-table-column>

                    <el-table-column
                            prop="reduceCharge"
                            label="减免罚息"
                            width="100"
                            align="center">
                    </el-table-column>
                </el-table>
            </template>

                <!--前端分页插件-->
            <template>
                <div class="block">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>

        </el-card>
    </div>

    <!--邮件发送模态框-->
    <el-dialog title="邮件发送" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="发送对象" :label-width="formLabelWidth">
                :<font color="red">{{totals}}</font>个对象
            </el-form-item>
            <el-form-item label="邮件内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="add()">发 送</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <!-- <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> -->
        </div>
    </el-dialog>


    <!--电话提醒模态框-->
    <el-dialog title="邮件发送" :visible.sync="showDialog">
        <el-form :model="form">
            <el-form-item label="发送对象" :label-width="formLabelWidth">
                :<font color="red">{{totals}}</font>个对象
            </el-form-item>
            <el-form-item label="电话内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="add1()">发 送</el-button>
            <el-button @click="showDialog = false">取 消</el-button>
            <!-- <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> -->
        </div>
    </el-dialog>

    <!--个人催收-->
    <el-dialog title="邮件发送" :visible.sync="dialogPersonEmail" append-to-body>
        <el-form :model="form">
            <el-form-item label="发送对象" :label-width="formLabelWidth">
                :<font color="red" size="5px">
                1
            </font>个对象
            </el-form-item>
            <el-form-item label="邮件内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="add22()">发 送</el-button>
            <el-button @click="dialogPersonEmail = false">取 消</el-button>
            <!-- <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> -->
        </div>
    </el-dialog>

    <!--催收详情页模态框-->
    <el-dialog title="催收详情页" :visible.sync="dialogTableVisible"
               fullscreen>
        <div class="zong">
            <div class="gy">
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="申请信息" name="first">
                            <el-collapse v-model="activeNames" @change="handleChange">
                                <el-collapse-item title="借款信息" name="1">
                                    <div>
                                        <el-table
                                                :data="tableData3"
                                                border
                                                style="width: 100%">
                                            <el-table-column
                                                    prop="money"
                                                    label="借款金额"
                                                    width="180"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="productBean.productName"
                                                    label="产品"
                                                    width="180"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="productBean.loanLife"
                                                    label="期限"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="productBean.monthRate"
                                                    label="利率"
                                                    :formatter="rateFormat1"
                                                    align="center">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </el-collapse-item>

                                <el-collapse-item title="用户基本信息" name="2">
                                    <div>
                                        <table  class="gridtable">
                                            <tr>
                                                <th>姓名</th>
                                                <th>{{tableData4.name}}</th>
                                                <th>身份证号</th>
                                                <th>{{tableData4.cardId}}</th>
                                            </tr>
                                            <tr>
                                                <th>性别</th>
                                                <th v-if="tableData4.gender==0">女</th>
                                                <th v-if="tableData4.gender==1">男</th>
                                                <th>国籍</th>
                                                <th>{{tableData4.national}}</th>
                                            </tr>
                                            <tr>
                                                <th>出生日期</th>
                                                <th>{{tableData4.birthday | convertTime}}</th>
                                                <th>年龄</th>
                                                <th>{{tableData4.age}}</th>
                                            </tr>
                                            <tr>
                                                <th>有效期</th>
                                                <th>{{tableData4.validity | convertTime}}</th>
                                                <th>发证机关</th>
                                                <th>{{tableData4.authority}}</th>
                                            </tr>
                                            <tr>
                                                <th>户籍地址</th>
                                                <th>{{tableData4.address}}</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            <tr>
                                                <th>现住址</th>
                                                <th>{{tableData4.addressNow}}</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            <tr>
                                                <th>手机号</th>
                                                <th>{{tableData4.telphone}}</th>
                                                <th>婚姻状况</th>
                                                <th v-if="tableData4.marryStatus==0">未婚</th>
                                                <th v-if="tableData4.marryStatus==1">已婚</th>
                                            </tr>
                                            <tr>
                                                <th>教育程度</th>
                                                <th>{{tableData4.edu}}</th>
                                                <th>政治面貌</th>
                                                <th>{{tableData4.politicalStatus}}</th>
                                            </tr>

                                        </table>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="家庭信息" name="3">
                                    <div>
                                        <table class="gridtable">
                                            <tr>
                                                <th>姓名</th>
                                                <th>{{tableData5.name}}</th>
                                                <th>身份证号</th>
                                                <th>{{tableData5.cardId}}</th>
                                            </tr>
                                            <tr>
                                                <th>性别</th>
                                                <th v-if="tableData5.gender==0">女</th>
                                                <th v-if="tableData5.gender==1">男</th>
                                                <th>国籍</th>
                                                <th>{{tableData5.national}}</th>
                                            </tr>
                                            <tr>
                                                <th>出生日期</th>
                                                <th>{{tableData5.birthday | convertTime}}</th>
                                                <th>年龄</th>
                                                <th>{{tableData5.age}}</th>
                                            </tr>
                                            <tr>
                                                <th>有效期</th>
                                                <th>{{tableData5.validity | convertTime}}</th>
                                                <th>发证机关</th>
                                                <th>{{tableData5.authority}}</th>
                                            </tr>
                                            <tr>
                                                <th>户籍地址</th>
                                                <th>{{tableData5.address}}</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            <tr>
                                                <th>现住址</th>
                                                <th>{{tableData5.addressNow}}</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            <tr>
                                                <th>手机号</th>
                                                <th>{{tableData5.telphone}}</th>
                                                <th>婚姻状况</th>
                                                <th v-if="tableData5.marryStatus==0">未婚</th>
                                                <th v-if="tableData5.marryStatus==1">已婚</th>
                                            </tr>
                                            <tr>
                                                <th>教育程度</th>
                                                <th>{{tableData5.edu}}</th>
                                                <th>政治面貌</th>
                                                <th>{{tableData5.politicalStatus}}</th>
                                            </tr>
                                        </table>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="担保人信息" name="4">
                                    <div>
                                        <table class="gridtable">
                                            <tr>
                                                <th>姓名</th>
                                                <th>{{tableData6.name}}</th>
                                                <th>身份证号</th>
                                                <th>{{tableData6.cardId}}</th>
                                            </tr>
                                            <tr>
                                                <th>性别</th>
                                                <th v-if="tableData6.gender==0">女</th>
                                                <th v-if="tableData6.gender==1">男</th>
                                                <th>国籍</th>
                                                <th>{{tableData6.national}}</th>
                                            </tr>
                                            <tr>
                                                <th>出生日期</th>
                                                <th>{{tableData6.birthday | convertTime}}</th>
                                                <th>年龄</th>
                                                <th>{{tableData6.age}}</th>
                                            </tr>
                                            <tr>
                                                <th>有效期</th>
                                                <th>{{tableData6.validity | convertTime}}</th>
                                                <th>发证机关</th>
                                                <th>{{tableData6.authority}}</th>
                                            </tr>
                                            <tr>
                                                <th>户籍地址</th>
                                                <th>{{tableData6.address}}</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            <tr>
                                                <th>现住址</th>
                                                <th>{{tableData6.addressNow}}</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            <tr>
                                                <th>手机号</th>
                                                <th>{{tableData6.telphone}}</th>
                                                <th>婚姻状况</th>
                                                <th v-if="tableData6.marryStatus==0">未婚</th>
                                                <th v-if="tableData6.marryStatus==1">已婚</th>
                                            </tr>
                                            <tr>
                                                <th>教育程度</th>
                                                <th>{{tableData6.edu}}</th>
                                                <th>政治面貌</th>
                                                <th>{{tableData6.politicalStatus}}</th>
                                            </tr>
                                        </table>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-tab-pane>
                        <el-tab-pane label="申请人附件" name="second">
                            <el-collapse v-model="activeNames" @change="handleChange">
                                <el-collapse-item title="身份证正面" name="1">
                                    <div>
                                        <div class="demo-image__preview">
                                            <el-image
                                                    style="width: 100px; height: 100px"
                                                    :src="url1"
                                                    :preview-src-list="srcList1">
                                            </el-image>
                                        </div>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="身份证反面" name="2">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url2"
                                                :preview-src-list="srcList2">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="户口本原件" name="3">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url3"
                                                :preview-src-list="srcList3">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="从业证明" name="4">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url4"
                                                :preview-src-list="srcList4">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="婚姻证明" name="5">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url5"
                                                :preview-src-list="srcList5">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="财产证明" name="6">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url6"
                                                :preview-src-list="srcList6">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-tab-pane>
                        <el-tab-pane label="担保人附件" name="third">
                            <el-collapse v-model="activeNames" @change="handleChange">
                                <el-collapse-item title="身份证正面" name="1">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url7"
                                                :preview-src-list="srcList7">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="身份证反面" name="2">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url8"
                                                :preview-src-list="srcList8">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="户口本原件" name="3">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url9"
                                                :preview-src-list="srcList9">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="从业证明" name="4">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url10"
                                                :preview-src-list="srcList10">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="婚姻证明" name="5">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url11"
                                                :preview-src-list="srcList11">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="财产证明" name="6">
                                    <div>
                                        <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url12"
                                                :preview-src-list="srcList12">
                                        </el-image>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-tab-pane>
                        <el-tab-pane label="历史催收信息" name="fiveth">
                            <template>
                                <el-table
                                        :data="tableData1"
                                        style="width: 100%"
                                        height="250">
                                    <el-table-column
                                            fixed
                                            prop="createTime"
                                            label="催收日期"
                                            width="150"
                                            :formatter="formatDate">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderBean.money"
                                            label="金额"
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderBean.createTime"
                                            label="还款期限"
                                            width="150"
                                            :formatter="formatDate1">
                                    </el-table-column>
                                    <el-table-column
                                            prop="collectionType"
                                            label="催收类型"
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="result"
                                            label="还款意愿"
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="collRelationship"
                                            label="与本人关系"
                                            width="120"
                                            :formatter="stateFormat">
                                    </el-table-column>
                                    <el-table-column
                                            prop="collObj"
                                            label="催收对象"
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="telphone"
                                            label="邮箱"
                                            width="120">
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
            <div class="zhong">

            </div>

            <div class="wei">
                <el-collapse v-model="activeNames1" @change="handleChange1">
                    <el-collapse-item title="常规催收" name="1">
                        <div>
                            <template>
                                <el-table
                                        :data="tableData2"
                                        border
                                        style="width: 100%">

                                    <el-table-column
                                            prop="name"
                                            label="姓名"
                                            width="120"
                                            align="center">
                                    </el-table-column>

                                    <el-table-column
                                            prop="relationship"
                                            label="与申请人关系"
                                            width="120"
                                            align="center"
                                            :formatter="relationFormat">
                                    </el-table-column>

                                    <el-table-column
                                            prop="telphone"
                                            label="邮件"
                                            width="200"
                                            align="center">
                                    </el-table-column>

                                    <el-table-column
                                            label="邮件催收"
                                            width="90"
                                            align="center">
                                        <template scope="scope">
                                            <el-button type="text" size="small" >
                                                <el-button type="text" @click="add11(scope.row)">操作
                                            </el-button>
                                            </el-button>
                                        </template>

                                    </el-table-column>

                                    <el-table-column
                                            label="电话催收"
                                            width="90"
                                            align="center">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small">操作</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="诉讼催收" name="2">
                    </el-collapse-item>
                    <el-collapse-item title="委外催收" name="3">
                </el-collapse>
            </div>
        </div>
    </el-dialog>
</div>
<script th:inline="javascript">

    let app = new Vue({
            el:'#main',
            data:{
                //批量选中的数据
                dataonLineListSelections: [],
                activeNames1: ['1'],
                activeName: 'second',
                activeNames: ['1'],
                dialogTableVisible: false,
                dialogPersonEmail:false,
                tableData3: []

                //     {
                //     money: '200',
                //     product:'月月还款',
                //     term:'20个月',
                //     rate:'1.2'
                // }
                ,
                tableData2: [],
                tableData1: [],
                // 身份证正面
                url1: '',
                // 身份证反面
                url2: '',
                // 户口本原价
                url3: '',
                // 从业证明
                url4: '',
                // 婚姻证明
                url5: '',
                // 财产证明
                url6: '',
                // 担保人附件
                // 身份证正面
                url7: '',
                // 身份证反面
                url8: '',
                // 户口本原价
                url9: '',
                // 从业证明
                url10: '',
                // 婚姻证明
                url11: '',
                // 财产证明
                url12: '',

                // 担保人身份证正面
                srcList1: [
                ],
                // 担保人身份证反面
                srcList2: [
                ],
                // 担保人户口本原价
                srcList3: [
                ],
                // 担保人从业证明
                srcList4: [
                ],
                // 担保人婚姻证明
                srcList5: [
                ],
                // 担保人财产证明
                srcList6: [
                ],
                // 担保人身份证正面
                srcList7: [
                ],
                // 担保人身份证反面
                srcList8: [
                ],
                // 担保人户口本原价
                srcList9: [
                ],
                // 担保人从业证明
                srcList10: [
                ],
                // 担保人婚姻证明
                srcList11: [
                ],
                // 担保人财产证明
                srcList12: [
                ],
                //多选框选中的个数
                totals:'',
                //后端传过来的总数信息
                countMonth:'',
                countYear:'',
                countMonthCount:'',
                countYearCount:'',
                dialogFormVisible: false,
                showDialog:false,
                total:'',
                //表格数据
                tableData:[],
                //总条数
                pageSize:10,
                //当前页
                currentPage:1,
                total:0,
                formInline: {
                    name: '',
                    userName: ''
                },
                form: {
                    // name: '',
                    content:''
                },
                formLabelWidth: '120px',
                orderId:'',
                userId:'',
                userfId:'',
                tableData4:{
                    // name:''
                },
                tableData5:{
                    // name:''
                },
                tableData6:{
                    // name:''
                },
                //催收邮箱
                emailName:'',
                //催收人
                colName:'',
                //催收类型
                colType:'常规催收',
                //催收关系
                colRelationship:''
            },
            filters:{
                convertTime : str =>{
                    let dt = new Date(str)
                    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
                }
            },
            methods:{

                //批量发送邮件
                add:function(){
                    for(var i = 0; i< this.dataonLineListSelections.length; i++){
                        let email=this.dataonLineListSelections[i].contractBean.orderBean.userBean.userInforBean1.telphone
                        axios.get([[@{gy/mail}]],{
                            params:{
                                // limit:10,
                                // pageNum:1,
                                // sort:"create_time",
                                // sortOrder:"desc",
                                // name:this.form.name,
                                region:this.form.content,
                                email:email,
                                collectionType:this.colType,
                                collObj:this.dataonLineListSelections[i].contractBean.orderBean.userBean.userInforBean1.name,
                                orderbeanId:this.dataonLineListSelections[i].contractBean.orderBean.id

                            }
                        })
                    .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                            console.log(res);
                            if(res.data.code==200){
                                alert("发送成功~")
                            }
                            // this.total = res.data.total;
                            // this.rows = res.data.rows;
                        })
                            .catch(error => {
                                console.log(error);
                            });
                    }

                },
                //向后端发起请求，加载表格内容，传的参数是当前查第几页
                getData(val){
                    axios.get([[@{overdue/findAll}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        for(let i = 0 ;i<this.tableData.length;i++){
                            if(this.tableData[i].status === 0){
                                this.tableData[i].status = true;
                            }
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                //改变每页显示数据条数时执行的方法
                handleSizeChange(val){
                    this.pageSize=val;
                    this.currentPage=1;
                    this.getData(this.currentPage);
                },
                //翻页时执行的方法
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.getData(this.currentPage);
                },
                change:function(index,row){
                    console.log(index,row);
                },
                //查询多选框选中的个数
                handleGoodsChange(row) {
                    // alert(row.length);
                    this.dataonLineListSelections=row;
                    this.totals=row.length;
                },
                handleClick(tab, event) {
                    console.log(tab, event);
                },
                handleChange(val) {
                    console.log(val);
                },
                handleChange1(val) {
                    console.log(val);
                },
                //催收状态转换
                gy1(row, column){
                    if(row.collectionStatus==0){
                        return "逾期结清"
                    }else if(row.collectionStatus==1){
                        return "逾期部分还款"
                    }else if(row.collectionStatus==2){
                        return "逾期中"
                    }
                },
                //还款意愿转换
                gy2(row, column){
                    if(row.repaymentWishes==0){
                        return "拒绝还款"
                    }else if(row.repaymentWishes==1){
                        return "承诺还款"
                    }
                },
                //还款类型转换
                gy3(row, column){
                    if(row.collectionType==0){
                        return "自主催收"
                    }else if(row.collectionType==1){
                        return "委外催收"
                    }else if(row.collectionType==2){
                        return "诉讼催收"
                    }
                },
                rateFormat1(row,col){
                    return row.productBean.monthRate+"%";
                },
                //表单提交
                onSubmit() {
                    axios.get([[@{overdue/findAll}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            name:this.formInline.name,
                            UserName:this.formInline.userName
                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        // for(let i = 0 ;i<this.tableData.length;i++){
                        //     if(this.tableData[i].status === 0){
                        //         this.tableData[i].status = true;
                        //     }
                        // }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                getSum(val1) {
                    axios.get([[@{overdue/count}]],{
                    }).then(res => {
                        console.info(res);
                        //将查询到的数据赋给表格中绑定的变量
                        this.countMonth = res.data.countMonth;
                        this.countYear = res.data.countYear;
                        this.countMonthCount = res.data.countMonthCount;
                        this.countYearCount = res.data.countYearCount;

                    }).catch(error => {
                        console.log(error);
                    })
                },
                //获得基本信息和历史催收信息
                jump(val){
                    this.orderId=val.contractBean.orderBean.id;
                    this.userId=val.contractBean.orderBean.userBean.id;
                    this.userfId=val.contractBean.orderBean.userBean.userInforBean1.id;
                    axios.get([[@{col/jump}]],{
                        params:{
                            orderId:this.orderId,
                            userId:this.userId,
                            userfId:this.userfId
                        }
                    })
                    .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                            console.info(res);
                            //借款信息
                            let list = [];
                            list.push(res.data.orderBean);
                            this.tableData3=list;
                            //历史催收信息
                            this.tableData1=res.data.all;
                            //常规催收人
                            let list1=[];
                            list1.push(res.data.userInforBean1);
                            list1.push(res.data.userInforBean2);
                            list1.push(res.data.orderBean1.userBean.userInforBean3);
                            this.tableData2=list1;
                            //个人身份信息
                            this.tableData4=res.data.userInforBean1;
                            //配偶身份信息
                            this.tableData5=res.data.userInforBean2;
                            //担保人信息
                            this.tableData6=res.data.orderBean1.userBean.userInforBean3;


                            //身份证正面
                            this.url1= res.data.userInforBean1.userDataBean.cardImg1;
                            let list10=[];
                            list10.push(res.data.userInforBean1.userDataBean.cardImg1);
                            this.srcList1=list10;
                            //身份证反面
                            this.url2= res.data.userInforBean1.userDataBean.cardImg2;
                            let list11=[];
                            list11.push(res.data.userInforBean1.userDataBean.cardImg2);
                            this.srcList2=list11;
                            //户口本原件
                            this.url3= res.data.userInforBean1.userDataBean.book;
                            let list12=[];
                            list12.push(res.data.userInforBean1.userDataBean.book);
                            this.srcList3=list12;

                            //从业证明
                            this.url4= res.data.userInforBean1.userDataBean.workProve;
                            let list13=[];
                            list13.push(res.data.userInforBean1.userDataBean.workProve);
                            this.srcList4=list13;

                            //婚姻证明
                            this.url5= res.data.userInforBean1.userDataBean.marryProve;
                            let list14=[];
                            list14.push(res.data.userInforBean1.userDataBean.marryProve);
                            this.srcList5=list14;

                            //财产证明
                            this.url6= res.data.userInforBean1.userDataBean.propertyProve;
                            let list15=[];
                            list15.push(res.data.userInforBean1.userDataBean.propertyProve);
                            this.srcList6=list15;

                            //担保人身份证正面
                            this.url7=res.data.orderBean1.userBean.userInforBean3.userDataBean.cardImg1;
                            let list20=[];
                            list20.push(res.data.orderBean1.userBean.userInforBean3.userDataBean.cardImg1)
                            this.srcList7=list20;

                            //担保人身份证反面
                            this.url8=res.data.orderBean1.userBean.userInforBean3.userDataBean.cardImg2;
                            let list21=[];
                            list21.push(res.data.orderBean1.userBean.userInforBean3.userDataBean.cardImg2)
                            this.srcList8=list21;

                            //担保人户口本原件
                            this.url9=res.data.orderBean1.userBean.userInforBean3.userDataBean.book;
                            let list22=[];
                            list22.push(res.data.orderBean1.userBean.userInforBean3.userDataBean.book)
                            this.srcList9=list22;

                            //担保人从业证明原件
                            this.url10=res.data.orderBean1.userBean.userInforBean3.userDataBean.workProve;
                            let list23=[];
                            list23.push(res.data.orderBean1.userBean.userInforBean3.userDataBean.workProve)
                            this.srcList10=list23;

                            //担保人婚姻证明原件
                            this.url11=res.data.orderBean1.userBean.userInforBean3.userDataBean.marryProve;
                            let list24=[];
                            list24.push(res.data.orderBean1.userBean.userInforBean3.userDataBean.marryProve)
                            this.srcList11=list24;

                            //担保人财产证明原件
                            this.url12=res.data.orderBean1.userBean.userInforBean3.userDataBean.propertyProve;
                            let list25=[];
                            list25.push(res.data.orderBean1.userBean.userInforBean3.userDataBean.propertyProve)
                            this.srcList12=list25;
                    })
                        .catch(error => {
                            console.log(error);
                        });

                },
                //时间转化
                formatDate(row, column) {

                    // 获取单元格数据
                    let data = row[column.property]
                    let dt = new Date(data)
                    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
                },
                formatDate1(row, column) {
                    console.info(row.orderBean.createTime);
                    let dt = new Date(row.orderBean.createTime);
                    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
                },
                stateFormat(row, column){
                    if(row.collRelationship==0){
                        return "本人"
                    }else if(row.collRelationship==1){
                        return "配偶"
                    }else if(row.collRelationship==2){
                        return "担保人"
                    }
                },
                //应还总额计算
                repaySumFormat(row,column){
                    return row.shouldRepayPrincipal+row.shouldRepayInterest+row.lateCharge;
                },
                //实还总额计算
                realSumFormat(row,column){
                    return row.realPrincipal+row.realInterest+row.lateCharge;
                },
                //将关系写死
                relationFormat(row,column){
                    if(this.tableData2[0].name===row.name){
                        return "本人"
                    }else if(this.tableData2[1].name===row.name){
                        return "配偶"
                    }else if(this.tableData2[2].name===row.name){
                        return "担保人"
                    }
                },
                add11(val){
                    this.dialogPersonEmail=true;
                    this.emailName=val.telphone;
                    this.colName=val.name;
                },
                add22(){
                    axios.get([[@{gy/mailPerson}]],{
                        params:{
                            collectionType:this.colType,
                            orderbeanId:this.tableData3[0].id,
                            // collRelationship:this.colRelationship,
                            collObj:this.colName,
                            region:this.form.content,
                            telphone:this.emailName
                        }
                    })
                .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                        console.log(res);
                        if(res.data.code==200){
                            alert("发送成功~")
                        }
                        // this.total = res.data.total;
                        // this.rows = res.data.rows;
                    })
                        .catch(error => {
                            console.log(error);
                        });
                }
            },
            //创建时执行查询，查第一页
            created : function () {
                this.getData(1);
                this.getSum();
            },

    })
    let app3 = new Vue({
        el:"#top"
    })
</script>
</body>
</html>